<template>
	<el-dialog title="产品列表" center v-model="dialogTableVisible" append-to-body>
		<el-table v-loading="loading" :data="productList" style="width: 100%" :header-row-style="{
				background: '#FAFAFA',
				color: '#0C1019',
				height: '54px',
			  }" :cell-style="{ height: '54px' }" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" align="center" />
			<el-table-column label="主键" align="center" prop="id"/>
			<el-table-column label="产品图片" align="center" prop="productPromoImageUrl" width="120">
				<template #default="scope">
					<img :src="scope.row.productPromoImageUrl" style="width: 100px; height: 100px" />
				</template>
			</el-table-column>
			<el-table-column label="产品名称" align="center" prop="productName" />
			<el-table-column label="农药登记证号" align="center" prop="pesticideRegistrationNumber" width="150" />
			<el-table-column label="品牌名称" align="center" prop="brandName" />
			<el-table-column label="产品类别" align="center" prop="productCategory" />

			<el-table-column label="剂型" align="center" prop="dosageForm">
				<template v-slot="scope">
					<dict-tag :options="bus_sosage_form" :value="scope.row.dosageForm" />
				</template>
			</el-table-column>

			<el-table-column label="毒性" align="center" prop="toxicity" />
			<el-table-column label="有效成分1" align="center" prop="activeIngredient1" width="150" />
			<el-table-column label="有效成分2" align="center" prop="activeIngredient2" width="150" />
			<el-table-column label="有效成分3" align="center" prop="activeIngredient3" width="150" />
			<el-table-column label="更新时间" align="center" prop="updateTime" width="200" />
		</el-table>

		<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
			:limit.sync="queryParams.pageSize" @pagination="getList" />
		<div slot="footer" class="dialog-footer text-right mt30">
			<el-button class="cancelSubBtn" @click="dialogTableVisible = false">取 消</el-button>
			<el-button type="primary" @click="Submit" class="mainSubBtn">确 定</el-button>
		</div>
	</el-dialog>
</template>

<script>
	import {
		listProduct, //产品列表
	} from "@/api/business/product";
	export default {
		data() {
			return {
				loading: true, // 遮罩层
				productList: [],
				dialogTableVisible: false,
				multiple: true, // 非多个禁用
				total: 0, // 总条数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
				}, //查询参数
				ids: [],
				bus_sosage_form:this.useDict('bus_sosage_form').bus_sosage_form
			}
		},
		created() {
			
		},
		methods: {
			open(){
				this.dialogTableVisible = true
				this.getList()
			},
			close(){
				
			},
			//查询产品列表
			getList() {
				this.loading = true;
				listProduct(this.queryParams).then((response) => {
					this.productList = response.rows;
					this.total = response.total;
					this.loading = false;
				});
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
				this.ids = selection.map((item) => item.id);
				this.single = selection.length !== 1;
				this.multiple = !selection.length;
			},
			Submit(){
				this.$emit('productIds',this.ids)
			}
		}
	}
</script>

<style>
</style>